import React from 'react';
import QueueAnim from 'rc-queue-anim';
import PropTypes from 'prop-types';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import {getcookie} from '../../utils/cookies'
import {setcookie} from '../../utils/cookies'


//模拟数据
const textData = {
  title: '老师的信息或者课程的详情介绍',
  teachName:'罗良奎',
  avatarUrl:'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKriab5ng7icpcctz6t7Q09dNUa4swM8uWibpkmWsAL1PBjCibC5lbJktI1X4yQPpElicbVWnbuiccicn02g/0',
  price: 120,
  yCoin: 12000,
  saleVolume: 1500
};
let dataArray = [
  { image: 'https://zos.alipayobjects.com/rmsportal/DGOtoWASeguMJgV.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/BXJNKCeUSkhQoSS.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/TDIbcrKdLWVeWJM.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/SDLiKqyfBvnKMrA.png' },
];

dataArray = dataArray.map(item => ({ ...item, ...textData }));

class Content extends React.Component {
  static defaultProps = {
    className: 'content0',
  };
  static propTypes = {
    className: PropTypes.string,
  };


  constructor(props) {
    super(props);
    this.state = {
      picOpen: {},
    };
  }


  onImgClick = (e, i) => {

  };



  onTweenEnd = (i) => {
    const picOpen = this.state.picOpen;
    delete picOpen[i];
    this.setState({
      picOpen,
    });
  };

  getDelay = (e) => {
    const i = e.index + dataArray.length % 4;
    return (i % 4) * 100 + Math.floor(i / 4) * 100 + 200;
  };

  getLiChildren = () => {
    const imgWidth = 220;
    const imgHeight = 152;
    const imgBoxWidth = 260;
    const imgBoxHeight = 192;
    if (this.props.fatherProps.indexInfo.groupList.length >= 3) {
      return this.props.fatherProps.indexInfo.groupList[3].courseList.map((item, i,id) => {
        const { courseName, salesNum,title,avatarUrl, teacherName,courseImgName,courseId,price, yCoin, saleVolume } = item;
        const isEnter = typeof this.state.picOpen[i] === 'boolean';
        const isOpen = this.state.picOpen[i];

        const left = isEnter ? 0 : imgBoxWidth * (i % 4);
        const isTop = Math.floor(i / 4);
        let top = isTop ? (isTop - 1) * imgBoxHeight : 0;
        top = isEnter ? top : imgBoxHeight * isTop;


        const liStyle = isEnter ? { width: '100%', height: 350, zIndex: 1 } : null;
        const liAnimation = isOpen ?
          { boxShadow: '0 2px 8px rgba(140, 140, 140, .35)' } :
          { boxShadow: '0 0px 0px rgba(140, 140, 140, 0)' };
        let aAnimation = isEnter ?
          ({
            delay: 400,
            ease: 'easeInOutCubic',
            width: imgWidth,
            height: imgHeight,
            onComplete: this.onTweenEnd.bind(this, i),
            left: imgBoxWidth * (i % 4),
            top: isTop ? imgBoxHeight : 0,
          }) : null;


        // 位置 js 控制；
        return (<TweenOne
          key={i}
          style={{
            left,
            top,
            ...liStyle,
          }}
          component="li"
          animation={liAnimation}
          onClick={()=>{
            {/*console.log("------courseId------",courseId)*/}
            {/*let courseId = courseId*/}

            let unionid = getcookie("unionid")
            if (unionid != null && unionid !='' && unionid != undefined) {
              this.props.fatherProps.dispatch({type:"courseDetail/getcourseBri",payload:{courseId,unionid}})
              this.props.fatherProps.dispatch({type:"index/indexToCourse",payload:{courseId,unionid}})
            } else {
              window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

            }


          }}
        >
          <TweenOne
            onClick={e => this.onImgClick(e, i)}
            className={`${this.props.className}-grid-child`}
            animation={aAnimation}
          >
            <img src={courseImgName} width="100%" height="100%" />
            <div>
              {courseName}
            </div>
            {/*<div>*/}
            {/*<img src={avatarUrl} width="50px" height="50px"/>*/}
            {/*<span>{teacherName}</span>*/}
            {/*</div>*/}
            <div>
              {/*<div>*/}
              {/*<span>逸贝：{yCoin}</span>*/}
              {/*<span>价格: {price}</span>*/}
              {/*</div>*/}

              <div>
                <span>{salesNum} 人在学</span>
              </div>
            </div>
          </TweenOne>

        </TweenOne>);
      });
    }

  };




  render() {
    // console.log("-----content2---this.props",this.props)
    const props = { ...this.props };
    // console.log(props);
    const isMode = props.isMode;
    delete props.isMode;
    return (
      <div
        {...props}
        className={`content-template-wrapper content-half-wrapper ${props.className}-wrapper`}
      >
        <div className={`${props.className}-text`}>
          <h1 key="h1" id={`${props.id}-title`}>
            高分四级六级
          </h1>
          <p>
            -----------------
          </p>
        </div>
        <div className={`${props.className}-grid`}>
          <QueueAnim
            delay={this.getDelay}
            component="ul"
            className={`${this.props.className}-image-wrapper`}
            interval={0}
            type="bottom"
          >
            {this.getLiChildren()}
          </QueueAnim>
        </div>
      </div>
    );
  }
}


export default Content;
